import React, {Component} from 'react';

class Item extends Component {

    render() {
        const data = this.props.data
        return (
            <div className="todo-item">
                <label>
                    <input
                        type="checkbox"
                        checked={data.done}
                        onChange={this.handleCheck(data.id)}
                    />
                    <span>{data.name}</span>
                </label>
                <button
                    className="btn btn-danger"
                    onClick={this.handleDeleteItem(data.id)}
                >删除
                </button>
            </div>
        );
    }

    // 处理点选点击事件
    handleCheck = (id) => {
        return (event) => {
            this.props.updateTask({
                id,
                done: event.target.checked
            })
        }
    }

    // 点击删除处理
    handleDeleteItem = (id) => {
        return () => {
            if(window.confirm("确认删除该任务？")){
                this.props.deleteTask(id)
            }
        }
    }
}

export default Item;
